<template>
	<view>
		<view class="blank"></view>
		<view class="conten" v-for="(item,index) in arr" :key="index">
			<view class="price">
				<text>{{item.prefere}}</text>
				<text>{{item.near}}</text>
			</view>
			<view class="middle">
				<text class="truncate">{{item.name}}</text>
				<text>{{item.cost}}</text>
			</view>
			<view class="coding">{{item.serial}}</view>
		</view>
	</view>
</template>

<script>
	import {
		favor
	} from "../../API/foodShop.js"
	export default {
		data() {
			return {
				arr: []
			}
		},
		methods: {
			fun() {
				favor().then((res) => {
					if (res.data.code == 200) {
						this.arr = res.data.data
						console.log(this.arr);
					} else {
						console.log(111);
					}
				}).catch((Error) => {
					console.log(Error);
				})
			},
			onShow() {
				this.fun()
			}
		}
	}
</script>

<style scoped>
	.blank {
		height: 20rpx;
		width: 100%;
		background-color: #ececec;
	}

	.conten {
		display: flex;
		justify-content: space-around;
		height: 180rpx;
		border-bottom: #ececec 1rpx solid;
		margin-left: 20rpx;
		padding-top: 40rpx;
	}

	.price,
	.middle {
		display: flex;
		flex-direction: column;
	}

	.price text:nth-child(1) {
		color: red;
		font-size: 40rpx;
	}

	.price text:nth-child(2) {
		color: #676767;
		margin-top: 10rpx;
	}

	.truncate {
		font-size: 40rpx;
		/* 省略号 */
		width: 300rpx;
		white-space: nowrap;
		/* 修正属性名为 nowrap */
		overflow: hidden;
		text-overflow: ellipsis;
		/* 修正属性名为 ellipsis */
		max-width: 300rpx;
		/* 添加最大宽度 */

	}

	.middle text:nth-child(2) {
		color: #676767;
		margin-top: 10rpx;
	}

	.coding {
		font-size: 40rpx;
		align-self: flex-start;
		margin-right: 50rpx;
	}
</style>